<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <el-dialog
      width="918px"
      :visible.sync="Dialog"
      @close="closeDialog"
      append-to-body
      custom-class="custom-dialog"
      :close-on-click-modal="false"
    >
      <div slot="title" class="clearfix">
        <span class="title_top">{{ title }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="row1">
            <span class="row1title">整车运行时间</span>
            <span class="row1value">{{ secondsFormat(zjkcsj) }}</span>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="row1">
            <span class="row1title">整车状态</span>
            <span
              class="row1value"
              :style="{ color: getHeadColor(data.stateCode) }"
              >{{ stateCode }}</span
            >
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            v-loading="isLoading"
            :data="tableDataRow1"
            style="width: 100%"
            max-height="300"
            row-key="id"
            lazy
            :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column
              prop="no"
              label="锭号"
              fixed="left"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="lssj"
              label="络纱时间"
              width="140"
            ></el-table-column>
            <el-table-column prop="dc" label="当前长度"></el-table-column>
            <el-table-column prop="bc" label="班长"></el-table-column>
            <el-table-column prop="xl" label="效率"></el-table-column>
            <el-table-column prop="cx" label="长细"></el-table-column>
            <el-table-column prop="mj" label="棉结"></el-table-column>
            <el-table-column prop="dc" label="短粗"></el-table-column>
            <el-table-column prop="nj" label="捻结"></el-table-column>
            <el-table-column prop="xh" label="循环"></el-table-column>
            <el-table-column prop="qc" label="切疵"></el-table-column>
            <el-table-column prop="yj" label="验结"></el-table-column>
            <el-table-column prop="hg" label="换管"></el-table-column>
            <el-table-column prop="cz" label="错支"></el-table-column>
            <el-table-column prop="xtq" label="系统切"></el-table-column>
            <el-table-column prop="yx" label="异纤"></el-table-column>
            <el-table-column prop="mt" label="满桶"></el-table-column>
            <el-table-column prop="cc" label="长粗"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="13">
          <el-row type="flex">
            <div class="table-column">专件更换</div>
            <el-table
              :data="tableData"
              style="width: 100%"
              height="150"
              size="mini"
              :header-cell-style="{
                background: '#F8F9FB',
                color: '#292B3D',
                fontWeight: 'normal'
              }"
            >
              <el-table-column
                prop="code"
                label="专件编码"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                prop="desc"
                label="专件描述"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                prop="date"
                label="上车时间"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                prop="day"
                label="剩余天数"
                min-width="10%"
              ></el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="11">
          <el-row type="flex">
            <div class="table-column">维护计划</div>
            <el-table
              :data="table1Data"
              style="width: 100%"
              height="150"
              size="mini"
              :header-cell-style="{
                background: '#F8F9FB',
                color: '#292B3D',
                fontWeight: 'normal'
              }"
            >
              <el-table-column
                prop="whlx"
                label="维护类型"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="dqjh"
                label="当前计划"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="sfwc"
                label="是否完成"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="xcjh"
                label="下次计划"
                min-width="20%"
              ></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'dialog_luotong',
  data() {
    return {
      Dialog: false,
      title: '',
      title_l: '',
      data: '',
      stateCode: '',
      zjkcsj: 0,
      info: {},
      isLoading: true,
      xiaoLv: 0,
      groupData: [],
      itemData: [],
      tableDataRow1: [],
      tableData: [
        {
          code: 'LK101',
          desc: '络筒',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        },
        {
          code: 'ZK102',
          desc: '络筒',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        },

        {
          code: 'LK103',
          desc: '络筒',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        },

        {
          code: 'ZK104',
          desc: '络筒',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        }
      ],
      table1Data: [
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        }
      ]
    };
  },

  mounted() {},
  computed: {
    luoTongNewestState() {
      return this.$store.state.workshop.luoTongNewestState;
    },
    luoTongGroupState1() {
      return this.$store.state.workshop.luoTongGroupState1;
    }
  },
  watch: {
    luoTongNewestState: {
      immediate: true,
      handler(val) {
        if (val.code == -1) {
          this.$message('查询数据失败！');
          this.closeDialog();
        } else if (val.code == 1) {
          this.itemData = this.groupItemUtils(val.data);
          this.zjkcsj = val.data.zjkcsj;
        }

        this.$nextTick(() => {
          this.init();
        });
      }
    },
    luoTongGroupState1: {
      immediate: true,
      handler(val) {
        if (val.code == -1) {
          this.$message('查询数据失败！');
          this.closeDialog();
        } else if (val.code == 1) {
          this.tableDataRow1 = this.groupUtils(val.data);
          this.isLoading = false;
        }
      }
    }
  },
  methods: {
    secondsFormat(s) {
      var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
      var hour = Math.floor((s - day * 24 * 3600) / 3600);
      var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
      var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
      if (hour) {
        return hour + '时' + minute + '分' + second + '秒';
      } else {
        if (second < 10) {
          if (minute < 10) {
            return '0' + minute + '分' + second + '0秒';
          } else {
            return minute + '分' + second + '0秒';
          }
        } else {
          return minute + '分' + second + '0秒';
        }
      }
    },
    load(tree, treeNode, resolve) {
      var loadData = [];
      if (tree.id == 1) {
        loadData = this.itemData.slice(0, 16);
      } else if (tree.id == 2) {
        loadData = this.itemData.slice(16, 32);
      } else if (tree.id == 3) {
        loadData = this.itemData.slice(32, 48);
      } else if (tree.id == 4) {
        loadData = this.itemData.slice(48, 64);
      }

      setTimeout(() => {
        resolve(loadData);
      }, 1000);
    },
    //明细工具类
    groupItemUtils(obj) {
      console.log('obj=====', obj);
      var itemList = [];
      for (var i = 1; i <= 64; i++) {
        var list = {
          id: 'id' + i,
          no: '第' + i + '锭',
          lssj: this.secondsFormat(eval('(' + obj.lssj + ')')['lssj' + i]),
          cx: eval('(' + obj.cx + ')')['cx' + i],
          mj: eval('(' + obj.mj + ')')['mj' + i],
          dc: eval('(' + obj.dc + ')')['dc' + i],
          nj: eval('(' + obj.nj + ')')['nj' + i],
          xh: eval('(' + obj.xh + ')')['xh' + i],
          qc: eval('(' + obj.qc + ')')['qc' + i],
          yj: eval('(' + obj.yj + ')')['yj' + i],
          hg: eval('(' + obj.hg + ')')['hg' + i],
          cz: eval('(' + obj.cz + ')')['cz' + i],
          xtq: eval('(' + obj.xq + ')')['xq' + i],
          yx: eval('(' + obj.yx + ')')['yx' + i],
          mt: eval('(' + obj.mt + ')')['mt' + i],
          cc: eval('(' + obj.cc + ')')['cc' + i],
          bc: eval('(' + obj.bc + ')')['bc' + i],
          xl:
            (Number(eval('(' + obj.xl + ')')['xl' + i]) * 100).toFixed(0) + '%'
        };
        itemList.push(list);
      }
      this.isLoading = false;
      return itemList;
    },
    //分组工具类
    groupUtils(obj) {
      var tableDataRow1 = [];

      for (var i = 1; i <= 4; i++) {
        var no = '';
        if (i == 1) {
          no = '第一分组 (1锭 ~ 16锭)品种:络筒';
        } else if (i == 2) {
          no = '第二分组 (17锭 ~ 32锭)品种:络筒';
        } else if (i == 3) {
          no = '第三分组 (33锭 ~ 48锭)品种:络筒';
        } else if (i == 4) {
          no = '第四分组 (49锭 ~ 64锭)品种:络筒';
        }
        var key = 'sum' + i;
        var list = {
          id: i,
          lssj: '',
          no: no,
          cx: obj.cx[key],
          mj: obj.mj[key],
          dc: '',
          nj: obj.nj[key],
          xh: obj.xh[key],
          qc: obj.qc[key],
          yj: obj.yj[key],
          hg: obj.hg[key],
          cz: obj.cz[key],
          xtq: obj.xtq[key],
          yx: obj.yx[key],
          mt: obj.mt[key],
          cc: obj.cc[key],
          bc: obj.bc[key],
          xl: (Number(obj.xl) * 100).toFixed(2) + '%',
          hasChildren: true
        };

        tableDataRow1.push(list);
      }

      return tableDataRow1;
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44';
        //停止
        case 2:
          return '#888F93';
        //故障
        case 3:
          return '#6D000E';
        //满纱满桶
        case 4:
          return '#ECCD54';
        //通讯失败
        case 5:
          return '#EB4E27';
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return '运行';
        //停止
        case 2:
          return '停止';
        //故障
        case 3:
          return '故障';
        //满纱满桶
        case 4:
          return '满纱满桶';
        //通讯失败
        case 5:
          return '通讯故障';
      }
    },
    showDialog(data) {
      this.data = data;
      this.title_l = '络筒' + data.devSn;
      this.title = 'VCRO-I 络筒' + data.devSn + '详情';
      this.xiaoLv = Number(data.xiaolv) * 100;
      this.stateCode = this.getHeadName(data.stateCode);
      this.Dialog = true;
      // this.$nextTick(() => {
      //   this.init();
      // });
    },
    closeDialog() {
      this.Dialog = false;
      this.isLoading = true;
      this.zjkcsj = 0;
      this.itemData.splice(0, this.itemData.length);
      this.tableDataRow1.splice(0, this.tableDataRow1.length);
      this.$parent.closeHandle('secLuoTongTimer');
    },
    init() {
      if (this.$refs.lulotongEcharts) {
        var lulotongEcharts = this.$echarts.init(this.$refs.lulotongEcharts);
        var option = {
          series: [
            {
              type: 'gauge',

              center: ['50%', '50%'],
              radius: '90%',
              min: 0,
              max: 100,
              itemStyle: {
                color: '#58D9F9',
                shadowColor: 'rgba(0,138,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, '#1D3E52']]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: '#62C6F3',
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, '85%'],
                fontSize: 20,
                color: '#58D9F9'
              },
              detail: {
                valueAnimation: true,
                fontSize: 28,
                fontFamily: 'electronicFont',
                offsetCenter: [0, '60%'],
                color: 'rgb(241,241,64)',
                formatter: function(value) {
                  return Math.round(value) + '%';
                }
              },

              data: [
                {
                  name: '效率',
                  value: this.xiaoLv
                }
              ]
            }
          ]
        };

        lulotongEcharts.setOption(option);
        window.addEventListener('resize', function() {
          lulotongEcharts.resize();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>
